<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS image stack cycle</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<section style="--n: 7; --k: 0">
  <article style="--i: 0; --a: -3.39deg">
    <h2>Tiger</h2><em>Panthera tigris</em><img src="https://images.unsplash.com/photo-1501705388883-4ed8a543392c?w=400" alt="tiger in the water"/>
  </article>
  <article style="--i: 1; --a: -14.2deg">
    <h2>Lion</h2><em>Panthera leo</em><img src="https://images.unsplash.com/photo-1519066629447-267fffa62d4b?w=400" alt="lion and lioness resting on a rock in the sun"/>
  </article>
  <article style="--i: 2; --a: 10.85deg">
    <h2>Leopard</h2><em>Panthera pardus</em><img src="https://images.unsplash.com/photo-1566489564594-f2163930c034?w=400" alt="blue-eyed leopard resting high up with its head on its front paws"/>
  </article>
  <article style="--i: 3; --a: -8.58deg">
    <h2>Jaguar</h2><em>Panthera onca</em><img src="https://images.unsplash.com/photo-1601544359642-c76c4f7c3221?w=400" alt="jaguar closeup"/>
  </article>
  <article style="--i: 4; --a: 13.45deg">
    <h2>Snow leopard</h2><em>Panthera uncia</em><img src="https://images.unsplash.com/photo-1689847190291-f8e0823f13ab?w=400" alt="snow leopard lying low on some rocks, its fur blending in perfecty"/>
  </article>
  <article style="--i: 5; --a: 5.19deg">
    <h2>Cheetah</h2><em>Acinonyx jubatus</em><img src="https://images.unsplash.com/photo-1693702366986-cbfbd1cf0450?w=400" alt="cheetah in the grass at dusk"/>
  </article>
  <article style="--i: 6; --a: -7.42deg">
    <h2>Cougar</h2><em>Puma concolor</em><img src="https://images.unsplash.com/photo-1661004527094-07d861089aed?w=400" alt="cougar walking through the snow"/>
  </article>
  <div>
    <button aria-label="previous" data-inc="-1"></button>
    <button aria-label="next" data-inc="1"></button>
  </div>
</section>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>
